<template>
  <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
    <div class="sidebar-wrapper">
      <sidebar class="sidebar-container"/>
    </div>
    <div class="main-container">
      <top-header></top-header>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import topHeader from './layout/topHeader.vue';
  import Sidebar from './layout/Sidebar.vue';
  export default {
    data () {
      return {};
    },
    components: {
      topHeader,
      Sidebar
    },
    computed: {
      sidebar: function () {
        return this.$store.state.sidebar;
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

  .app-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    &:after {
      content: "";
      display: table;
      clear: both;
    }
    &.hideSidebar {
      .sidebar-wrapper {
        transform: translate(-140px, 0);
        .sidebar-container {
          transform: translate(132px, 0);
        }
        &:hover {
          transform: translate(0, 0);
          .sidebar-container {
            transform: translate(0, 0);
          }
        }
      }
      .main-container {
        margin-left: 40px;
      }
    }
    .sidebar-wrapper {
      width: 180px;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1001;
      overflow-x: hidden;
      transition: all .28s ease-out;
      &::-webkit-scrollbar-track-piece {
        background: #d3dce6;
      }
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background: #99a9bf;
        border-radius: 20px;
      }
    }
    .sidebar-container {
      transition: all .28s ease-out;
    }
    .main-container {
      min-height: 100%;
      transition: all .28s ease-out;
      margin-left: 180px;
    }
  }
</style>
